<template>
  <div>
    <!-- banner -->
    <div class="banner_about">
      <div>入市须知</div>
    </div>
    <!-- 侧边导航 -->
    <div class="content_Ru">
      <div class="j_sideNav_two" style="height:123px;">
        <ul id="j_box_box_1">
          <li>
            <router-link to="/account">
              开户须知
            </router-link>
          </li>
          <!-- <li>
            <router-link to="/two">
              入金选项 &nbsp;&nbsp;&nbsp;&nbsp;<img src="./images/jt.png" alt="">
            </router-link>
          </li> -->
          <li>
            <router-link to="/withdraw">
              出入金流程
            </router-link>
          </li>
        </ul>
      </div>
      <!-- 文字内容 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default{
    linkActiveClass: 'active',
    data() {
      return{
        ind: 0,
        jind: 0,
        acc: 0
      }
    },
    mounted: function () {
      this.$nextTick(function () {
        window.addEventListener('scroll', this.onScroll)
      });
//      this.jump(this.acc);
    },
    created: function() {  //
      this.acc= this.$route.query.acc;
    },
    methods:{
//      onScroll () {
//        let scrolled = document.documentElement.scrollTop || document.body.scrollTop;
//        let sidea = document.querySelector('.j_sideNav_one');
//        if (scrolled >= 2800) {
//          sidea.style.top = '30%';
//        } else if (scrolled <= 2800) {
//          sidea.style.top = '30%';
//        } else if (scrolled <= 300) {
//          sidea.style.top = '45%';
//        } else if (scrolled >= 300) {
//          sidea.style.top = '30%';
//        } else if (scrolled <= 800 && scrolled >= 300) {
//          sidea.style.top = '30%';
//        } else if (scrolled <= 2500 && scrolled >= 800) {
//          sidea.style.top = '10%';
//        } else {
//          sidea.style.top = '30%';
//        }
//      }
    }
  }
</script>

<style scoped>
  .content_Ru{
    position:relative;
  }
  a:hover{
    text-decoration: none;
  }
  a:link{
    text-decoration: none;
  }
  a:active{
    text-decoration: none;
  }
  .Reg-VerifyImg img {
    height: 32px;
  }
  form {
    margin: 0!important;
  }
  label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
  }
  .forex_content{
    width: 1200px;
    margin:0 auto;
    background: #fff;
    padding-top: 50px;
    padding-bottom: 100px;
  }
  .forex_content .forex_border{
    width: 980px;
    margin-left: 55px;
    box-sizing: border-box;
    padding-right: 50px;
  }
  .forex_content .forex_border ul li h1{
    font-size: 30px;
    color: #358ac7;
    margin-bottom: 50px;
    margin-top: 30px;
  }
  .banner_about{
    height: 411px;
    width: 100%;
    background: url("../../../static/images/banner_min.jpg") no-repeat;
    overflow: hidden;
  }
  .banner_about div{
    padding-top:228px;
    width:1085px;
    margin:0 auto;
    font-size: 48px;
    color: #fff;
    box-sizing: border-box;
  }
  .j_sideNav_two{
    width:220px;
    height:195px;
    position: absolute;
    top: 50px;
    right: 0;
    z-index:5;
  }
  @media (min-width: 1024px){
    .j_sideNav_two{
      right: 5%;
    }
  }
  @media (min-width: 1100px) {
    .j_sideNav_two{
      right: 18%;
    }
  }
  @media (min-width: 1366px){
    .j_sideNav_two{
      right: 19%;
    }
  }
  @media (min-width: 1440px) {
    .j_sideNav_two{
      right: 23%;
    }
  }
  @media (min-width: 1680px){
    .j_sideNav_two{
      right: 16%;
    }
  }
  .j_sideNav_two #j_box_box_1 li{
    width: 193px;
    height: 47px;
    text-align: center;
    line-height: 47px;
    border-radius: 3px;
  }
  .j_sideNav_two #j_box_box_1 li:nth-child(2){
    margin-top: 20px;
  }
  .j_sideNav_two #j_box_box_1 li a{
    color: #fff;
    display: block;
    width: 193px;
    height: 43px;
    background: url("./images/jt.png") #bbbbbb no-repeat;
    background-position: 170px;
    font-size:19px;
    text-align: left;
    padding-right: 20px;
    box-sizing:border-box;
    text-indent: 18px;
  }
  .j_sideNav_two #j_box_box_1 li a.active{
    background: url("./images/h_arrow.png") #ffcc00 no-repeat;
    background-position: 170px;
    color: #333;
  }
  .j_sideNav_two #j_box_box_1 li a img{
    margin-left: 28px;
    vertical-align: middle;
  }
  .j_sideNav_two #j_box_box_1 li:nth-child(2) a img{
    margin-left: 8px;
  }
  .j_sideNav_two #j_box_box_1 li:nth-child(3){
    margin-top: 20px;
  }
</style>
